<!-- 
	按钮组组件 
	1、按钮图片数组
	2、按钮图片设置：组件上边距/组件下边距 组件大小 圆角大小 按钮数量 是否滑动 按钮行数 背景设置 字体大小 字体样式 字体颜色
-->
<template>
	<div class="component-wrapper" :class="className">
		<div v-html="css"></div>
		<!-- 列表 -->
		<template v-if="data.previewColor">
			<div v-if="list.length <= 0" style="text-align: center;font-size: 16px;line-height: 32px">
				请先添加按钮
			</div>
			<ul class="button-box" v-if="list && list.length > 0 && !data.isScroll">
				<li v-for="(item, index) in list" :key="`${index}-${item.id}`">
					<image class="button-img" :src="item.image || emptyImage" alt=""></image>
					<p class="button-title">{{ item.text }}</p>
				</li>
			</ul>
			<uni-swiper-dot style="width: 100%" v-if="list && list.length > 0 && data.isScroll" :info="scrollList" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(items ,idx) in scrollList" :key="idx" class="button-box">
						<li v-for="(item, index) in items" :key="`${index}-${item.id}`" @click="navigateTo(item)">
							<image class="button-img" :src="item.image || emptyImage" alt=""></image>
							<p class="button-title">{{ item.text }}</p>
						</li>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- <Swiper style="width: 100%" v-if="list && list.length > 0 && data.isScroll" :options="swiperOption"
				ref="mySwiper">
				<Swiper-slide v-for="(items, idx) in scrollList" :key="idx" class="button-box">
					<li v-for="(item, index) in items" :key="`${index}-${item.id}`" @click="navigateTo(item)">
						<image class="button-img" :src="item.image || emptyImage" alt=""></image>
						<p class="button-title">{{ item.text }}</p>
					</li>
				</Swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</Swiper> -->
		</template>

	</div>
</template>

<script>
	import emptyImage from "@/static/images/image.png";
	// import {
	// 	Swiper,
	// 	SwiperSlide
	// } from 'vue-awesome-swiper';

	// 自定义样式
	const css = function() {
		if (this.data.previewColor) {
			const {
				paddingTop,
				paddingBottom,
				buttonSize,
				borderRadius,
				buttonNumber,
				previewColor,
				fontSize,
				textStyle,
				fontColor,
			} = this.data;

			return `
		        .component-${this.id} .button-box{
		            padding: ${paddingTop}px 0 ${paddingBottom}px 0;
		            background-color: ${previewColor.color || '#f8f8f8'};
		            background-image: url(${previewColor.isColor == 2 ? previewColor.image : ''});
		            background-size: 100% 100%;
		            background-position: center;
		            background-repeat: no-repeat;
		        }
		
		        .component-${this.id} .button-box li{
		            width: ${buttonNumber == 4 ? '25' : '20'}%;
		        }
		
		        .component-${this.id}  .button-img{
		            width: ${buttonSize}px;
		            height: ${buttonSize}px;
		            border-radius: ${borderRadius}px;
		        }
		
		        .component-${this.id}  .button-title{
		            font-size:${fontSize}px;
		            font-weight: ${textStyle.includes('1') ? 'bold' : ''};
		            font-style: ${textStyle.includes('2') ? 'italic' : ''};
		            color: ${fontColor};
		        }
		    `;
		}
	};
	export default {
		name: 'u_button',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						/**
						 * 按钮图片数组
						 * "id": 图片ID
						 * "image": 图片地址
						 * "isMinApp":  1 内部链接 2小程序链接
						 * "h5Link":  H5页面跳转地址 内部链接时赋值
						 * "gh_id": 小程序原始ID 2小程序链接时赋值
						 * "minAppLink": 小程序页面跳转地址
						 * "text":  链接名称
						 */
						"list": [],
						//组件样式 未实现
						"chooseStyle": {
							type: String,
							default: '2'
						},
						//组件上边距
						"paddingTop": {
							type: Number,
							default: 0
						},
						//组件下边距
						"paddingBottom": {
							type: Number,
							default: 0
						},
						//按钮大小
						"buttonSize": {
							type: Number,
							default: 50
						},
						//圆角大小
						"borderRadius": {
							type: Number,
							default: 25
						},
						//按钮数量
						"buttonNumber": {
							type: String,
							default: '4'
						},
						//是否滑动
						"isScroll": {
							type: Boolean,
							default: false
						},
						//按钮行数 (只有选择按钮数量为滑动时生效)
						"buttonLine": {
							type: Number,
							default: 1
						},
						// 背景设置
						previewColor: {
							// 标题栏背景类型 1=背景颜色 2=背景图片
							isColor: {
								type: String,
								default: '1'
							},
							// 背景颜色 isColor 为 1是取值
							color: {
								type: String,
								default: '#ffffff'
							},
							// 背景图片 isColor 为 2是取值
							image: {
								type: String,
								default: ''
							}
						},
						//字体大小
						"fontSize": {
							type: Number,
							default: 14
						},
						//文字样式  [0] 加粗 [1] 斜体
						"textStyle": [],
						// 文字颜色
						"fontColor": {
							type: String,
							default: '#666666'
						}
					}
				}
			}
		},
		data() {
			return {
				emptyImage,
				scrollList: [], //轮播时用的数值结构
				// 轮播图设置
				// swiperOption: {
				// 	autoplay: false,
				// 	// loop: true,   loop模式第二轮循环的时候第一张会闪烁
				// 	delay: 3000,
				// 	observer: true,
				// 	// autoHeight: true,
				// 	pagination: {
				// 		el: '.swiper-pagination',
				// 	}
				// },
				current: 0,
				mode: 'dot',
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				}
			}
		},
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			list() {
				return this.data.list;
			},
			buttonNumber() {
				return this.data.buttonNumber;
			},
			buttonLine() {
				return this.data.buttonLine || 1;
			}
		},
		watch: {
			list: {
				deep: true, //深度监听
				handler: function() {
					let list = this.data.list;
					this.scrollList = [];
					if (!this.data.buttonLine) {
						this.data.buttonLine = 1
					}
					let page = Math.ceil(this.data.list.length / this.data.buttonNumber / this.data
						.buttonLine); //==> 页数
					let num = this.data.buttonNumber * this.data.buttonLine; // ==> 每页多少个
					for (let i = 0; i < page; i++) {
						this.scrollList.push(list.slice(i * num, (i + 1) * num))
					}
				}
			},
			buttonNumber(newValue) {
				let list = this.data.list;
				this.scrollList = [];
				if (!this.data.buttonLine) {
					this.data.buttonLine = 1
				}
				let page = Math.ceil(this.data.list.length / newValue / this.data.buttonLine); //==> 页数
				let num = newValue * this.data.buttonLine; // ==> 每页多少个
				for (let i = 0; i < page; i++) {
					this.scrollList.push(list.slice(i * num, (i + 1) * num))
				}
			},
			buttonLine(newValue) {
				let list = this.data.list;
				this.scrollList = [];
				if (!newValue) {
					newValue = 1
				}
				let page = Math.ceil(this.data.list.length / this.data.buttonNumber / newValue); //==> 页数
				let num = this.data.buttonNumber * newValue; // ==> 每页多少个
				for (let i = 0; i < page; i++) {
					this.scrollList.push(list.slice(i * num, (i + 1) * num))
				}
			}
		},
		methods: {
			// 滑动切换
			change(e) {
				this.current = e.detail.current
			},
			initButtons() {
				if (this.data.list) {
					let list = this.data.list;
					this.scrollList = [];
					if (!this.data.buttonLine) {
						this.data.buttonLine = 1
					}
					let page = Math.ceil(this.data.list.length / this.data.buttonNumber / this.data
						.buttonLine); //==> 页数
					let num = this.data.buttonNumber * this.data.buttonLine; // ==> 每页多少个
					for (let i = 0; i < page; i++) {
						this.scrollList.push(list.slice(i * num, (i + 1) * num))
					}
				}
			},
			// 页面跳转
			navigateTo(item){	
				if(item.isMinApp == 1){
					//H5链接跳转
					uni.navigateTo({
						url: '/pages/webView/webView?url='+encodeURIComponent(item.h5Link),
						animationType: 'fade-in'
					});
				}else if(item.isMinApp == 2){
					// 小程序链接跳转
					uni.navigateTo({
						url: item.minAppLink,
						animationType: 'fade-in'
					});
				}			
			}
		},
		// components: {
		// 	Swiper,
		// 	SwiperSlide
		// },
		mounted() {
			this.$nextTick(() => {
				this.initButtons();
			})
		}
	}
</script>

<style lang="less" scoped>
	// @import "swiper/css/swiper.css";
	// 默认
	.component-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;

		.button-box {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			li {
				/*flex: 1;*/
				/*width: 25%;*/
				position: relative;
				margin: 10px 0;
				list-style: none;
				display: flex;
				flex-direction: column;
				align-self: center;
				justify-self: center;
			}

			.button-img {
				margin: 0 auto;
			}

			.button-title {
				text-align: center;
				margin: 0;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: break-word;
				overflow: hidden;
			}
		}
	}
	.swiper-box {
		height: 120px;
	}
</style>
